<template>
  <div class="uploadFile-box">
    <div>
      <el-upload
        class="dialog-upload"
        action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :http-request="toRequest"
        fit="fill"
      >
        <div v-if="updImageUrl1 || imgStr1 || Identificationone !== ''">
          <el-image
            v-if="updImageUrl1 || imgStr1"
            style="width: 350px; height: 300px;"
            fit="fill"
            :src="updImageUrl1 || imgStr1"
          />
          <i v-else class="el-icon-plus">
            身份证正面
          </i>
        </div>
        <div v-else>
          <el-image
            v-if="updImageUrl2 || imgStr2"
            style="width: 350px; height: 300px;"
            fit="fill"
            :src="updImageUrl2 || imgStr2"
          />
          <i v-else class="el-icon-plus">
            身份证反面
          </i>
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
// 上传限制
import {fileUpload} from '../../const/api_staffCenter.js'
const updLimit = '.png,.jpg'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url 我是右侧图片 反面 2
    imgStr2: {
      type: String,
      default: () => ''
    },
    // 我是左侧图片  正面 1
    imgStr1: {
      type: String,
      default: () => ''
    },
    // 我是1  正面
    Identificationone: {
      type: String,
      default: () => ''
    },
    // 我是2  反面
    Identificationtwo: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      uploadUrl: fileUpload,
      updImageUrl1: '', //正面
      updImageUrl2: '', //反面
      updLimit,
      // 上传属性
      imgAttr: {}
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$emit('uploadSuccess', file)
    },
    // 上传规则
    beforeAvatarUpload(file) {
      const isFormat = updLimit.includes(
        file.name.replace(/.+\./, '').toLowerCase()
      )
      if (!isFormat) {
        this.$message.error('上传证照只能是JPG、PNG格式!')
        return false
      }
      // 限制大小
      const isLimit = file.size / 1024 / 1024 < 11
      if (!isLimit) {
        this.$message.error('上传证照大小不能超过 10MB!')
        return false
      }
    },
    toRequest(data) {
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: {'Content-Type': 'multipart/form-data'},
        data: fd
      }).then(res => {
        // this.$message({type: 'success', message: '上传成功'})
        // 赋值上传后的地址给文档
        if (this.Identificationone == '1') {
          // 正面
          this.updImageUrl1 = res.data.payload
          console.log(this.updImageUrl1, '我是1正面')
        } else {
          //反面
          this.updImageUrl2 = res.data.payload
          console.log(this.updImageUrl2, '我是2 反面')
        }
        this.$emit(
          'RequestUpload',
          this.updImageUrl1 ? this.updImageUrl1 : this.updImageUrl2,
          this.Identificationone
            ? this.Identificationone
            : this.Identificationtwo
        )
      })
    }
  }
}
</script>
<style scoped lang="less">
.uploadFile-box {
  padding: 0;
  .dialog-upload {
    width: 350px;
    height: 300px;
    margin-right: 10px;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e5e5;

    .el-image {
      max-width: 350px;
      height: 300px;
    }
  }
}
</style>
